<template>
    <v-app-bar app rounded>
      <template #title>
        <div class="d-flex align-center">
          <div class="d-flex align-center mr-8">个人博客后台系统</div>
          <v-switch base-color="#24bfa5" color="#f26c1c" v-model="switchProxy" class="d-flex align-center mr-8" />
          <v-btn size="large" style="font-size: large;" :icon="isDark ? 'mdi-weather-night' : 'mdi-white-balance-sunny'"
            @click="toggleTheme"></v-btn>
          <v-btn icon variant="text" @click="toggleFullscreen" :ripple="false" aria-label="Toggle Fullscreen">
              <v-icon size="30" :icon="isFullscreen ? 'mdi-fullscreen-exit' : 'mdi-fullscreen'"></v-icon>
          </v-btn>
        </div>
      </template>
      <template #default />
      <template #append>
        <v-avatar class="avatar-rotate mr-16" style="cursor: pointer;" @click="router.push('/settings')" border="primary lg" image="https://community-cdn.exiliumgf.com/prod/image/1751943832251.png" size="50"></v-avatar>
      </template>
    </v-app-bar>
</template>

<script setup lang="ts">
  import useFullscreen from '@/hooks/fullScreen'
  const { isFullscreen, toggleFullscreen } = useFullscreen()
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: true
    }
})
const emit = defineEmits(['update:modelValue'])
const switchProxy = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
})

import { useRouter } from 'vue-router'
const router = useRouter()
// TODO: 主题持久化
import useToggleTheme from '@/hooks/themes'

const theme = useToggleTheme()
const isDark = theme.isDark
const toggleTheme = theme.toggleTheme


// TODO：全屏切换

</script>

<style scoped lang="less">
.avatar-rotate {
    transition: transform 0.3s ease-in-out;
}
.avatar-rotate:hover {
    transform: rotate(720deg);
}
</style>